How can I rewrite this code:

var toggle = document.getElementById("test_switch");

var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme)
    document.documentElement.setAttribute('data-theme', storedTheme)


toggle.onclick = function() {
    var currentTheme = document.documentElement.getAttribute("data-theme");
    var targetTheme = "light";

    if (currentTheme === "light") {
        targetTheme = "dark";
    }

    document.documentElement.setAttribute('data-theme', targetTheme)
    localStorage.setItem('theme', targetTheme);
};

so this retain its checkmarks:

<label for="mode_test">
    <input type="checkbox" id="test_switch">
</label>

I stumbled upon the code above in a blog post that included local storage and (prefers-color-scheme: dark) in their implementation of dark mode, I just don't know how to reconcile that with using checkboxes.

Thanks.